<template name="upload">
  <div id="videouploadsteps" class="ui uploadpage" style="width: 100%;max-width:800px;margin: auto;">
    <div class="ui segment brd-rad-non" style="margin:20px 0px;padding:30px;">
      <div class="ui indicating progress" id="progressvideo" style="display:none">
        <div class="bar"></div>
        <div class="label">{{ translate 'UPLOAD_UPLOADING_VIDEO'}}</div>
      </div>
      <div class="ui indicating progress" id="progresssnap" style="display:none">
        <div class="bar"></div>
        <div class="label">{{ translate 'UPLOAD_UPLOADING_SNAP'}}</div>
      </div>
      {{> uploadvideoprogress}}
      <form class="ui form" id="uploadLinkForm">
        <div class="field">
          <div class="ui action input">
            <input id="remotelink" type="text" name="url" placeholder="{{translate 'UPLOAD_LINK_PLACEHOLDER'}}" value="">              
            <button id="remotelinkbutton" class="ui red right icon button">
              <i class="upload icon"></i>
            </button>
          </div>
        </div>
        {{#if searchedLink}}
          <div class="preview">
            {{#if tempContent}}
              <div class="ui grid segment">
                <div class="six wide column">
                  <div class="field segment">
                    <label>{{ translate 'UPLOAD_THUMBNAIL'}}</label>
                    <img width="100%" src='{{tempContent.thumbnailUrl}}' />
                  </div>
                  {{#if isOnMobile}}
                    <div class="ui centered grid">
                        <label for="snapFile" style="width:100%;">
                          <a class="ui red fluid dtube icon right labeled button needsclick" id="uploadSnap">
                            <div style="display:inline-block; padding:0.8em 1em;" class="needsclick">
                              {{ translate 'UPLOAD_UPLOAD_SNAP'}}
                            </div>
                            <i class="cloud upload icon red" style="background:white; opacity:1;"></i>
                          </a>
                        </label>
                        <input type="file" id="snapFile" style="display: none;">
                    </div>
                  {{else}}
                    <div>
                        <label for="snapFile">
                          <a class="ui red dtube icon right labeled button" style=" margin-top:10px;" id="uploadSnap">
                            <div style="display:inline-block; padding:0.8em 1em;">
                              {{ translate 'UPLOAD_UPLOAD_SNAP'}}
                            </div>
                            <i class="cloud upload icon red" style="background:white; opacity:1;"></i>
                          </a>
                        </label>
                        <input type="file" id="snapFile" style="display: none;">
                    </div>
                  {{/if}}
                </div>
                <div class="ten wide column">
                    {{> uploadform}}
                </div>
              </div>
            {{else}}
              <div class="ui active inverted dimmer">
                <div class="ui text loader">Loading</div>
              </div>
            {{/if}}
          </div>
        {{/if}}
      </form>

      <div id='uploadSeparator' class="ui horizontal divider" style='border-top: 0px;'>
        Or
      </div>

      <!-- OLD SCHOOL AND COMPLEX UPLOAD -->

      <center>
        <select id="uploadEndpointSelection" class="ui fluid selection dropdown">
          <option value="">{{ translate 'UPLOAD_ENDPOINT_PLACEHOLDER' }}</option>
          <option value="cluster.d.tube">{{ translate 'UPLOAD_ENDPOINT_DEFAULT' }} (cluster.d.tube)</option>
          {{#each endpoint in thirdPartyUploadEndpoints}}
          <option value="{{endpoint}}">{{endpoint}}</option>
          {{/each}}
        </select><br>
        <div id="dropzone" class="dropzone needsclick">
          <div class="needsclick">
            <i class="video icon"></i>
            <h2>{{ translate 'UPLOAD_UPLOAD_FILE'}}</h2>
          </div>
        </div>
        <input type="file" name="fileToUpload" id="fileToUpload" style="display: none;">
      </center>

      <div id="uploadDetails" style='display: none'>
        <div id="previewzone">
          <div class="ui grid">
            <div class="one column row">
              <div class="column">
                <video id="videopreview" class="dsp-non wid-ful" controls autoplay style="height: 100%;"></video>
                <canvas id="snappreview" class="dsp-non" style="display: none"></canvas>
              </div>
            </div>
          </div>
          {{#if isOnMobile}}
            <div class="ui centered grid" style="text-align:right; margin-top:20px; margin-bottom:20px;">
                <!-- <a class='ui icon right labeled dtube grey button needsclick' id='snap' download='snap.jpg' style="margin:1rem!important;width: 100%;">
                  <div style="display:inline-block;padding: 0.8em 1em;" class="needsclick">
                    {{ translate 'UPLOAD_TAKE_SNAP'}}
                  </div>
                  <i class="photo icon black" style="background: white;opacity: 1;"></i>
                </a> -->
                <label for="snapFile" style="width:100%;">
                  <a class="ui red fluid dtube icon right labeled button needsclick" id="uploadSnap">
                    <div style="display:inline-block; padding:0.8em 1em;" class="needsclick">
                      {{ translate 'UPLOAD_UPLOAD_SNAP'}}
                    </div>
                    <i class="cloud upload icon red" style="background:white; opacity:1;"></i>
                  </a>
                </label>
                <input type="file" id="snapFile" style="display: none;">
            </div>
          {{else}}
            <div style="text-align:right; margin-top:30px; margin-bottom:40px;">
                <a class="ui icon right labeled dtube grey button" id="snap" download="snap.jpg" style="margin-right: 10px!important; margin-top:10px;">
                  <div style="display:inline-block; padding:0.8em 1em;">
                    {{ translate 'UPLOAD_TAKE_SNAP'}}
                  </div>
                  <i class="photo icon black" style="background:white; opacity:1;"></i>
                </a>
                <label for="snapFile">
                  <a class="ui red dtube icon right labeled button" style=" margin-top:10px;" id="uploadSnap">
                    <div style="display:inline-block; padding:0.8em 1em;">
                      {{ translate 'UPLOAD_UPLOAD_SNAP'}}
                    </div>
                    <i class="cloud upload icon red" style="background:white; opacity:1;"></i>
                  </a>
                </label>
                <input type="file" id="snapFile" style="display: none;">
            </div>
          {{/if}}
        </div>
        {{> uploadfileform}}
      </div>
      {{#if tempContent}}
        {{#if activeUsername}}
          <div class="ui red icon message">
            <i class="fire icon"></i>
            <div class="content">
              <div class="header">
                PROMOTE YOUR VIDEO BY BURNING DTC
              </div>
              <div class="ui red range" id="burn-range"></div>
            </div>
          </div>
        {{/if}}
        <button class="ui fluid red right labeled dtube icon button uploadsubmit" type="button" style="margin-bottom:10px;">
          <div style="display:inline-block;padding: 0.8em 1em;">
              {{#if publishBurn}}
                PUBLISH VIDEO AND BURN {{displayMoney publishBurn 0 'DTC'}}
              {{else}}
                PUBLISH VIDEO
              {{/if}}
          </div>
          {{#if publishBurn}}
            <i class="fire icon red" style="background: white;opacity: 1;"></i>
          {{else}}
            <i class="checkmark icon red" style="background: white;opacity: 1;"></i>
          {{/if}}
          <i class="icon white loading spinner dsp-non" style="background-color: transparent;opacity:1;"></i>
        </button>
      {{/if}}
    </div>
  </div>
</template>
